<template>
  <view class="flex m-b30">
    <view class="flex flex-1" @click="open">
      <text class="text-700-130">{{ selectedCity }}</text>
      <image class="square-30 m-l14" src="@/static/images/home/location-1.png" />
    </view>

    <view class="input-view flex p-h16" @click="gotoUrl">
      <image class="square-48" src="@/static/images/public/search.png" />
      <text class="p-h10 text-500-428">请输入关键词/职位</text>
    </view>

    <up-picker ref="pickerRef" title="选择城市" :show="show" closeOnClickOverlay :columns="[columns]" @confirm="onConfirm"
      @cancel="close" @close="close" />
  </view>
</template>

<script lang="ts" setup>
import { useHomeLocationPicker } from '@/hooks/use-home-location'

const {
  pickerRef,
  selectedCity,
  columns,
  show,
  open,
  close,
  onConfirm,
} = useHomeLocationPicker()
function gotoUrl() {
  uni.switchTab({ url: "/pages/tab-page/tab-2/tab-2" })
}
</script>

<style lang="scss" scoped>
.input-view {
  width: 570rpx;
  height: 74rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;
}
</style>
